<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 创建一个id为app的div元素，其内容引用了维护当前dom片段vue实例的data属性中的message属性值-->
    <div id="app"> {{ message }} </div>
    <script>
        //- 实例化一个vue组件
        //- 通过el属性指定其要维护id为app的这个dom元素。每个vue组件都维护了一个dom结构，可以通过vue组件的template属性来定义，也可以通过el属性来建立与已定义dom结构的关联
        //- 通过data属性，指定此vue组件实例要维护的数据，当前只维护了一个名为message的数据。
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>